// 模拟新闻数据
let newsData = [
    {
        id: 1,
        title: "示例新闻标题1",
        content: "这是示例新闻1的详细内容。这里可以展示更多的新闻内容，让用户能够更好地了解新闻的主要内容。新闻内容可以包含多个段落，以便更好地组织信息。",
        publishTime: "2024-03-20 10:00:00"
    },
    {
        id: 2,
        title: "示例新闻标题2",
        content: "这是示例新闻2的详细内容。这里可以展示更多的新闻内容，让用户能够更好地了解新闻的主要内容。新闻内容可以包含多个段落，以便更好地组织信息。",
        publishTime: "2024-03-19 15:30:00"
    }
];

// 分页配置
const pageSize = 5;
let currentPage = 1;

// 初始化页面
document.addEventListener('DOMContentLoaded', () => {
    loadNews();
    setupPagination();
});

// 加载新闻列表
function loadNews() {
    const newsItems = document.querySelector('.news-items');
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const pageNews = newsData.slice(startIndex, endIndex);

    newsItems.innerHTML = pageNews.map(news => `
        <div class="news-item">
            <h3><a href="javascript:void(0)" onclick="showNewsDetail(${news.id})">${news.title}</a></h3>
            <div class="meta">
                <span><i class="far fa-clock"></i> ${news.publishTime}</span>
                <span><i class="far fa-eye"></i> ${Math.floor(Math.random() * 1000)} 次浏览</span>
            </div>
            <div class="preview">
                ${news.content.substring(0, 150)}...
            </div>
            <a href="javascript:void(0)" onclick="showNewsDetail(${news.id})" class="read-more">
                阅读更多 <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    `).join('');
}

// 显示新闻详情
function showNewsDetail(id) {
    const news = newsData.find(n => n.id === id);
    if (news) {
        const modal = document.createElement('div');
        modal.className = 'news-modal';
        modal.innerHTML = `
            <div class="modal-content">
                <span class="close-btn" onclick="this.parentElement.parentElement.remove()">&times;</span>
                <h2>${news.title}</h2>
                <div class="meta">
                    <span><i class="far fa-clock"></i> ${news.publishTime}</span>
                    <span><i class="far fa-eye"></i> ${Math.floor(Math.random() * 1000)} 次浏览</span>
                </div>
                <div class="content">
                    ${news.content}
                </div>
            </div>
        `;
        document.body.appendChild(modal);

        // 添加模态框样式
        const style = document.createElement('style');
        style.textContent = `
            .news-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }
            .news-modal .modal-content {
                background-color: white;
                padding: 2rem;
                border-radius: 8px;
                max-width: 800px;
                width: 90%;
                max-height: 90vh;
                overflow-y: auto;
                position: relative;
            }
            .news-modal .close-btn {
                position: absolute;
                top: 1rem;
                right: 1rem;
                font-size: 1.5rem;
                cursor: pointer;
                color: #666;
            }
            .news-modal h2 {
                color: #2c3e50;
                margin-bottom: 1rem;
                font-size: 1.8rem;
            }
            .news-modal .meta {
                color: #666;
                margin-bottom: 1.5rem;
                display: flex;
                gap: 1rem;
            }
            .news-modal .content {
                line-height: 1.8;
                color: #333;
            }
        `;
        document.head.appendChild(style);
    }
}

// 设置分页
function setupPagination() {
    const totalPages = Math.ceil(newsData.length / pageSize);
    const pageNumbers = document.querySelector('.page-numbers');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    const jumpInput = document.querySelector('.page-jump input');
    const jumpBtn = document.querySelector('.jump-btn');

    // 生成页码按钮
    pageNumbers.innerHTML = '';
    for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement('button');
        button.textContent = i;
        if (i === currentPage) {
            button.classList.add('active');
        }
        button.addEventListener('click', () => {
            currentPage = i;
            loadNews();
            setupPagination();
        });
        pageNumbers.appendChild(button);
    }

    // 上一页按钮
    prevBtn.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            loadNews();
            setupPagination();
        }
    });

    // 下一页按钮
    nextBtn.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            loadNews();
            setupPagination();
        }
    });

    // 页码跳转
    jumpBtn.addEventListener('click', () => {
        const page = parseInt(jumpInput.value);
        if (page && page > 0 && page <= totalPages) {
            currentPage = page;
            loadNews();
            setupPagination();
        } else {
            alert('请输入有效的页码！');
        }
    });
} 